<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Site | Home</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body>
<div id="container">
	<div id="preview-image">
		<div id="preview-image-header">

			<h1>Black and White Films</h1>
			<br>
			<h2>The charm of black and white film photography with just a simple click</h2>
    </div>
		<img alt="" src="/sites/all/themes/dxo/images/films_nb_01.jpg" id="preview">
	</div>

	<div id="preview-filter">
		<!-- changer l'id en fonction du nombre d'img | 2 img => id="bloc2" | etc ... 6 img MAX -->
		<ul id="bloc4">
			<li class="thumb">
				<img title="" alt="" src="/sites/all/themes/dxo/images/films_nb_01.jpg" class="active">
				Ilford HPS 800</li>
			<li class="thumb">
				<img alt="" src="/sites/all/themes/dxo/images/films_nb_02.jpg" style="opacity: 0.3;">

				Ilford Pan F Plus 50</li>
			<li class="thumb">
				<img title="" alt="" src="/sites/all/themes/dxo/images/films_nb_03.jpg" style="opacity: 0.3;">
				Polaroid 667</li>
			<li class="thumb">
				<img alt="" src="/sites/all/themes/dxo/images/films_nb_04.jpg" style="opacity: 0.3;">
				Kodak Tri-X 400</li>

		</ul>
</div>
	<div id="clear"></div>
</div>	
<script type="text/javascript" src="../js/lib.js"></script> 
<script type="text/javascript" src="../js/l10n.js"></script> 
<script type="text/javascript" src="../js/plugin.js"></script> 
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
